<template>
  <a-modal
    v-bind:visible="isShowAdd"
    width="40%"
    :title="title"
    @ok="handleOk"
    :maskClosable="false"
    @cancel="hanldeCancel"
  >
    <a-form-model
      ref="formRef"
      :rules="ruleForm"
      :model="formData"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <a-form-model-item label="是否菜单">
        <a-radio-group name="is_menu" @change="onChange" v-model="formData.is_menu">
          <a-radio :value="1"> 菜单 </a-radio>
          <a-radio :value="0"> 按钮 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="后台管理器">
        <a-input v-model="formData.controller" placeholder="请输入后台管理器"></a-input>
      </a-form-model-item>
      <a-form-model-item label="名称" prop="title">
        <a-input v-model="formData.title" placeholder="请输入名称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="图标" v-if="formData.is_menu == 1">
        <div class="iconStyle">
          <a-icon style="font-size: 20px" :type="icon_Type" />
        </div>
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group name="status" v-model="formData.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="上级权限">
        <a-input v-model="formData.pid" placeholder="请输入上级权限"></a-input>
      </a-form-model-item>
      <a-form-model-item label="路径" v-if="formData.is_menu == 1">
        <a-input v-model="formData.path" placeholder="请输入路径"></a-input>
      </a-form-model-item>
      <a-form-model-item label="权限名称" prop="name">
        <a-input v-model="formData.name" placeholder="请输入权限名称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="图标" v-if="formData.is_menu == 1">
        <a-input v-model="icon_Type" placeholder="请输入图标"></a-input>
      </a-form-model-item>
      <a-form-model-item label="是否显示在菜单中" v-if="formData.is_menu == 1">
        <a-radio-group name="hidden" v-model="formData.hidden">
          <a-radio :value="1"> 显示 </a-radio>
          <a-radio :value="0"> 不显示 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addMenuAPI, editMenuAPI } from '@/api/admin.js'
export default {
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    recordData: {
      type: Object,
      default: () => {}
    },
    pidInfo: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    isShowAdd(boolean) {
      if (boolean) {
        if (this.title == '修改') {
          this.icon_Type = this.recordData.icon
          this.formData.is_menu = this.recordData.is_menu
          this.formData.controller = this.recordData.controller
          this.formData.status = this.recordData.status
          this.formData.name = this.recordData.name
          this.formData.pid = this.recordData.pid
          this.formData.path = this.recordData.path
          this.formData.title = this.recordData.title
          this.formData.hidden = this.recordData.hidden
        }
        if (this.pidInfo) {
          this.formData.pid = this.pidInfo
        }
      } else {
        this.formData = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          icon: '',
          is_menu: 1,
          controller: '',
          status: 1,
          name: '',
          pid: '',
          path: '',
          title: '',
          hidden: 1
        }
        this.$emit('update:recordData', {})
        this.$emit('update:pidInfo', undefined)
      }
    }
  },
  name: 'EditMenu',
  data() {
    return {
      icon_Type: '',
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        icon: '', // 图标
        is_menu: 1, //是否菜单
        controller: '', //后台管理器
        status: 1, // 状态
        name: '', // 权限名称
        pid: '', //上级权限
        path: '', // 路径
        title: '', // 名称
        hidden: 1 //是否显示
      },
      ruleForm: {
        title: [{ required: true, message: '请输入标题' }],
        name: [{ required: true, message: '请输入权限名称' }]
      }
    }
  },
  methods: {
    onChange() {
      this.formData.icon = ''
      this.formData.controller = ''
      this.formData.status = ''
      this.formData.name = ''
      this.formData.pid = ''
      this.formData.path = ''
      this.formData.title = ''
      this.formData.hidden = ''
      this.formData.icon = ''
      this.icon_Type = ''
    },
    handleOk() {
      this.formData.icon = this.icon_Type
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        if (Object.values(this.recordData).length > 0) {
          try {
            const result = await editMenuAPI(this.formData)
            this.$emit('update:isShowAdd', false)
            this.$emit('upload')
            this.$message.success(result.msg)
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        } else {
          try {
            const result = await addMenuAPI(this.formData)
            this.$emit('update:isShowAdd', false)
            this.$emit('upload')
            this.$message.success(result.msg)
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        }
      })
    },
    hanldeCancel() {
      this.$emit('update:isShowAdd', false)
    }
  }
}
</script>

<style lang="less" scoped>
v-deep .ant-row,
.ant-form-item {
  margin-bottom: 10px;
}

.iconStyle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 60px;
  height: 60px;
  border: 1px solid #cccccc;
}
</style>
